<script setup lang="ts">
import { defineProps,PropType } from '@vue/runtime-core';

interface BarPart{
  color:string,
  percent:number,
}

const props=defineProps({
  // undo:Number as PropType<number>,
  right:Number as PropType<number>,
  wrong:Number as PropType<number>,
  width:String as PropType<string>,
  height:String as PropType<string>,
})

const convert_percent2width=(percent:string|number)=>{
  if ( typeof percent=='string' && percent.endsWith('%')) {
    return percent
  }else if (typeof percent=='number') {
    if (percent<=1) {
      return (percent*100).toFixed(0)+'%'
    }else{
      return percent.toFixed(0)+'%'
    }
  }
}

</script>

<template>
  <div 
    class="bar-container"
    :style="{width:width,height:width}"
  >
    <div class="bar-parts" >
      <section class="bar-part right" :style="{width:convert_percent2width(right)}"></section>
      <section class="bar-part wrong" :style="{width:convert_percent2width(wrong)}"></section>
      <!-- <section class="bar-part undo" :style="{width:convert_percent2width(undo+0.1)}"></section> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.bar-container{
  position: relative;
}

.bar-parts{
  position: absolute;
  bottom:0;
  left:0;
  width: 100%;
  height:4px;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  // border-radius: 100px;
  border-bottom: 4px solid dodgerblue;
}
.bar-part{
  height: 100%;
  border-radius: 10px;
  &.right{
    background-color: lime;
  }
  &.wrong{
    background-color: orangered;
  }
  &.undo{
    background-color: slategrey;
  }
}
</style>
